<template>
  <div>
    <h1>注册账号</h1>
    <input type="text" placeholder="请输入手机号"  v-model="text1"/><button
      @click="getmove()"
      :class="bool ? 'st' : ''"
    >
      {{text}}
    </button>
    <br />
    <div class="sl"></div>

    <input type="text" placeholder="请输入验证码" v-model="text2"/><span :class="bool1 ? 'spann' : ''">{{Num}}</span>
    <br />
    <div class="sl"></div>

    <input type="password" placeholder="请输入新密码（最少8位，数字+字母）" v-model="text3"/>
    <br />
  
    <div class="sl"></div>
      <input type="checkbox" class="check" v-model="text4"><p>为保障您的个人隐私权益请在点击同意按钮前认真阅读下方协议：《贝壳隐私政策》及《贝壳用户服务协议》</p>
    <section @click="getlogin()">注册</section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text1:"",
      text2:"",
      text3:"",
      text4:false,
      bool: false,
      bool1:false,
      text:"获取验证码",
      time:60,
      Num:""
    }
  },
  methods: {
    // xianshi(){
    //     let fagg=false
    //     if (fagg) {
    //     (this).prev().prop("type","text")
    //     fagg=false
    // } else {
    //     (this).prev().prop("type","password")
    //     fagg=true
    // }
    // },
    getlogin(){
        let _log1=/^\d{11}$/
        let _log2 = /[a-zA-Z]/
        let _log=/\d/
        let _char=/.{8,16}/
        let _log3=_log2.test(this.text3)&&_char.test(this.text3)&&_log.test(this.text3)
        if (_log1.test(this.text1)&&this.text2==this.Num&&this.text2!=""&&this.text4) {
            if (_log3) {
              this.$store.dispatch("LINK_LOGIN_DATA",{phone: this.text1,pass:this.text3})
              this.$router.push('register')
               
            }else{
                alert("密码错误")
            }
           
        }
    },
    getmove() {
        if (this.time==60) {
             
             this.bool = true;
             this.bool1 = true;
        for(let i=0;i<4;i++){
            this.Num+=Math.round(Math.random()*9)
            
        }
        
        let Wtime=setInterval(() => {
          
            this.text= this.time--+"s"
            
            if(this.time<0){
            this.bool = false;
            this.text= "获取验证码"
            clearInterval(Wtime);
            }
        }, 1000);
        
        } else if(this.time<0){
            this.time=60
            this.Num=""
        }
      
    },
  },
};
</script>

<style scoped lang="scss">
div {
  margin: 0 0.3rem;
  border: 0;
  h1 {
    font-size: 0.2rem;
    margin-bottom: 0.3rem;
  }

  .spann{
    position: absolute;
    top: 1.71rem;
    right: 0.3rem;
    width: 1rem;
    text-align: center;
    line-height: 0.4rem;
    height: 0.44rem;
    border: 0;
    background-color: lightskyblue;
    color: black;
  }
  input {
    margin-top: 0.1rem;
    height: 0.44rem;
    width: 100%;
    border: 0;
    text-indent: 0.08rem;
  }
  button {
    position: absolute;
    top: 1.17rem;
    right: 0.3rem;
    color: #bababa;
    width: 1.5rem;
    text-align: center;
    line-height: 0.4rem;
    height: 0.44rem;
    background: white;
    border: 0;
  }
  .st {
    position: absolute;
    top: 1.17rem;
    right: 0.3rem;

    width: 1.5rem;
    text-align: center;
    line-height: 0.4rem;
    height: 0.44rem;

    border: 0;
    background-color: lightsalmon;
    color: black;
  }
  
  .sl {
    margin: 0;
    width: 100%;
    border-bottom: 0.01rem solid #dedbdb;
  }
  .check{
    width: .12rem;
    height: .12rem;
    border-radius: 50%;
    transform: translatex(.04rem);
  }
  p{
    font-size: .12rem;
    color:#bababa;
    margin-left:.23rem ;
    transform: translateY(-.19rem);
  }
  section{
    display: block;
    text-decoration: none;
    text-align: center;
    line-height: .5rem;
    width: 3.2rem;
    height: .5rem;
    background-color: rgb(151, 151, 232);
    color: white;
    border-radius: .05rem;
  }
}
</style>